<template>
  <div id="options">
    <top-bar :title="title"></top-bar>
    <div class="account">
      <md-field>
        <md-field-item name="item1" title="实名认证" @click="authentication">
          <span class="quicon" v-show="IsAuthenticationicon"></span>
          <span slot="right" class="quiconimg">
            {{IsAuthentication}}
            <img src="@/assets/imgs/arrow_right.png" />
          </span>
        </md-field-item>
      </md-field>
    </div>
    <div class="options_name">
      <md-field>
        <md-field-item name="item2" title="登录密码" @click="Setpwd">
          <span slot="right" class="quiconimg">
            {{Issetpwd}}
            <img src="@/assets/imgs/arrow_right.png" />
          </span>
        </md-field-item>
        <md-field-item name="item3" title="支付密码" @click="SetPayPwd">
          <span slot="right" class="quiconimg">
            {{Issetpaypwd}}
            <img src="@/assets/imgs/arrow_right.png" />
          </span>
        </md-field-item>
      </md-field>
    </div>
    <div v-show="false">
      <p class="third_text">第三方账户绑定</p>
      <md-field>
        <md-field-item name="item4" title="微信(微信昵称)" arrow="arrow-right" :value="IsbindingWX" align="right"></md-field-item>
        <md-field-item name="item5" title="QQ" arrow="arrow-right" :value="IsbindingQQ" align="right"></md-field-item>
        <md-field-item name="item6" title="微博" arrow="arrow-right" :value="IsbindingMB" align="right"></md-field-item>
      </md-field>
    </div>
    <div class="options_name">
      <md-field>
        <md-field-item name="item7" title="更换手机号" @click="ReplacePhone">
          <span slot="right" class="quiconimg">
            {{phone}}
            <img src="@/assets/imgs/arrow_right.png" />
          </span>
        </md-field-item>
        <md-field-item name="item8" title="账号注销" arrow="arrow-right" @click="Unsubscribe">
          <span slot="right" class="quiconimg">
            <img src="@/assets/imgs/arrow_right.png" />
          </span>
        </md-field-item>
      </md-field>
    </div>
  </div>
</template>
<script>
import { Tabs, Icon, Field, FieldItem, Dialog } from 'mand-mobile';
import Loading from '@/components/loading';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import http from '@/common/http';
import TopBar from '@/components/TopBar';
export default {
  components: {
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [Field.name]: Field,
    [Dialog.name]: Dialog,
    [FieldItem.name]: FieldItem
  },
  data() {
    return {
      title: '账户安全',
      IsAuthentication: '', // 是否实名认证
      Issetpwd: '未设置', // 是否设置登录密码
      Issetpaypwd: '未设置', // 是否设置支付密码
      IsbindingWX: '未绑定', // 是否绑定微信
      IsbindingQQ: '未绑定', // 是否绑定QQ
      IsbindingMB: '未绑定', // 是否绑定微博
      phone: '', // 用户手机号码
      IsAuthenticationicon: false,
      Issetpwdicon: true,
      Issetpaypwdicon: true
    };
  },
  mounted() {
    Loading.show();
    http.post('/pakj/passenger/getUserInfo').then(res => {
      Loading.hide();
      console.log(res.data);
      if (res.data.code === '000000') {
        this.phone = this.startFun(decryptByDESModeEBC(res.data.data.user_phone), 3, 4);
        if (res.data.data.is_identity === '1') {
          this.IsAuthentication = '已认证';
          this.IsAuthenticationicon = false;
        } else {
          this.IsAuthentication = '未认证';
          this.IsAuthenticationicon = true;
        }
        if (res.data.data.is_login_pwd === '1') {
          this.Issetpwd = '已设置';
          this.Issetpwdicon = false;
        } else {
          this.Issetpwd = '未设置';
          this.Issetpwdicon = true;
        }
        if (res.data.data.is_pay_pwd === '1') {
          this.Issetpaypwd = '已设置';
          this.Issetpaypwdicon = false;
        } else {
          this.Issetpaypwd = '未设置';
          this.Issetpaypwdicon = true;
        }
      } else {
        Dialog.alert({
          title: '提示',
          content: res.data.msg,
          confirmText: '确定'
        });
      }
    });
  },
  methods: {
    // 实名认证
    authentication() {
      this.$router.push({
        name: 'Authentication'
      });
    },
    // 设置/修改登录密码
    Setpwd() {
      if (this.Issetpwd === '未设置') {
        this.$router.push({
          name: 'ChangeLoginPasswordPhone',
          query: {
            action: 'set'
          }
        });
      } else {
        this.$router.push({
          name: 'ModifyPwd',
          query: {
            action: 'change'
          }
        });
      }
    },
    // 设置/修改支付密码
    SetPayPwd() {
      if (this.Issetpaypwd === '未设置') {
        this.$router.push({
          name: 'ChangePayPasswordPhone',
          query: {
            action: 'set'
          }
        });
      } else {
        this.$router.push({
          name: 'ModifyPayPwd',
          query: {
            action: 'change'
          }
        });
      }
    },
    // 更换手机号
    ReplacePhone() {
      this.$router.push({
        name: 'ReplacePhone'
      });
    },
    // 注销账户
    Unsubscribe() {
      this.$router.push({
        name: 'Unsubscribe'
      });
    },
    startFun(str, frontLen, endLen) {
      var len = str.length - frontLen - endLen;
      var xing = '';
      for (var i = 0; i < len; i++) {
        xing += '*';
      }
      return str.substring(0, frontLen) + xing + str.substring(str.length - endLen);
    }
  }
};
</script>
<style lang="stylus" scoped>
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

#options {
  height: 100vh;
  background-color: color-primary-background;
}

.quicon {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #EB0404;
  position: absolute;
  top: 30px;
  left: 125px;
}

.quiconimg {
  font-size: 30px;
  color: #999;
}

.quiconimg img {
  width: 16px;
  height: 20px;
  margin-left: 5px;
}

.account {
  padding-top: 18px;
}

.urgent {
  margin-top: 20px;
}

.options_name {
  margin-top: 20px;
}

.third_text {
  font-size: 26px;
  padding: 22px 0px 22px 30px;
  line-height: 36px;
}
</style>
